<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>编辑器</title>
    <link type="text/css" rel="stylesheet" href="js/emoji/jquery.emojiarea.css">
    <link href="js/umeditor1.2.3-utf8-php/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/layer/layer.js"></script>
    <script type="text/javascript" src="js/umeditor1.2.3-utf8-php/third-party/template.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/umeditor1.2.3-utf8-php/umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/umeditor1.2.3-utf8-php/umeditor.min.js"></script>
    <script type="text/javascript" src="js/umeditor1.2.3-utf8-php/lang/zh-cn/zh-cn.js"></script>
    <style>
        .ub {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -o-box;
            display: box;
            position: relative;
        }

        .ub-ac {
            -webkit-box-align: center;
            -moz-box-align: center;
            -ms-flex-align: center;
            -o-box-align: center;
            box-align: center;
        }

        .ub-pe {
            -webkit-box-pack: end;
            -moz-box-pack: end;
            -ms-flex-pack: end;
            -o-box-pack: end;
            box-pack: end;
        }

        #btnFoot {
            height: 4rem;
        }

        .btn {
            width: 4rem;
            height: 1.8rem;
            line-height: 1.8rem;
            text-align: center;
            border-radius: .2rem;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            color: #ffffff;
            margin-right: 1rem;
            border: 1px solid;
        }

        .btn:hover {
            opacity: .8;
        }

        .btn.cancel {
            background-color: #F9C650;
        }

        .btn.ok {
            background-color: #00cc66;
        }
    </style>
</head>
<body>
<!--style给定宽度可以影响编辑器的最终宽度-->
<script type="text/plain" id="myEditor" style="width:100%;height:400px;">请输入内容</script>
<div style="position: fixed;bottom: 0;left: 0;width: 100%;background-color: #ffffff;z-index: 9999;">
    <div id="btnFoot" class="ub ub-ac ub-pe">
        <div class="btn cancel">取消</div>
        <div class="btn ok">发送</div>
    </div>
</div>

<script type="text/javascript">
    //实例化编辑器
    var uMyEditor = UM.getEditor('myEditor', {
        //自定义功能按钮
        toolbar: [
            'emotion image video',
            ' | undo redo ',
            ' | forecolor backcolor',
            ' | paragraph fontfamily fontsize',
            ' | justifyleft justifycenter justifyright justifyjustify',
            ' | bold italic underline strikethrough formula',
            ' | superscript subscript',
            ' | insertorderedlist insertunorderedlist',
            ' | selectall removeformat',
            ' | link unlink horizontal',
            ' | print preview', 'drafts cleardoc', ' | source'
        ]
        , focus: false //初始化时，是否让编辑器获得焦点true或false
        , autoClearinitialContent: true //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
        , fullscreen: true//全屏
        , autoHeightEnabled: false// 是否自动长高,默认true
    });

    if (localStorage.getItem('inputHtmlEditor')) {
        uMyEditor.setContent(localStorage.getItem('inputHtmlEditor'));//写入内容
    }

    var layerIndex = parent.layer.getFrameIndex(window.name);
    $('.btn').on('click', function (e) {
        var $e = $(this);
        if ($e.hasClass('cancel')) {
            parent.layer.close(layerIndex);
        }

        if ($e.hasClass('ok')) {
            var isValue = uMyEditor.hasContents();//判断是否有内容 true/false
            if (!isValue) {
                layer.msg('请输入内容');
                return;
            }
            var editorHtml = uMyEditor.getContent();//获取内容
            //todo:发送消息，type为html
            var msgObj = {
                msg_id: '',
                head_pic: '',
                type: 'html',
                time: '',
                content: editorHtml
            };

            parent.layer.close(layerIndex);
        }
    });

</script>

</body>
</html>